import React, { useState, useEffect } from 'react';
import { Layout, Dropdown, Menu } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import useRouter from 'components/hooks/useRouter';
// import { logout } from 'api/Login';
import { useLocalStorageState } from 'ahooks';
import SideMenu from './SideMenu';
const { Header, Content, Footer } = Layout;
const TRANSLATE = 'translate'
const USER_MANAGE = 'userManage'
const PileMenu = [{
    menuName: '翻译',
    menuKey: TRANSLATE
}, {
    menuName: '用户管理',
    menuKey: USER_MANAGE
}]
const LayoutPage = (props: any) => {
    const [activeMenu, setActiveMenu] = useState(TRANSLATE)
    const router = useRouter();
    const [ userName, setUserName ]= useLocalStorageState('userName', '');
    const onClick = ({ key }: { key: string }) => {
        if (key === 'logout') {
            // logout().then(() => {
            //     router.push('/login');
            // });
        }
    };
    useEffect(() => {
        console.log(router)
    }, [router])
    useEffect(() => {
        router.push(activeMenu)
    }, [activeMenu])
    return (
        <Layout className="layout">
            <Header
                className="text-right"
                style={{ position: 'fixed', zIndex: 1, width: '100%', backgroundColor: '#fff', borderBottom: '1px solid #f0f0f0'}}
            >
                <Dropdown
                    overlay={() => (
                        <Menu onClick={onClick}>
                            <Menu.Item key="logout">退出登录</Menu.Item>
                        </Menu>
                    )}
                >
                    <span className="pointer">
                        <span className="mr10">{userName}</span>
                        <UserOutlined />
                    </span>
                </Dropdown>
            </Header>
            <Content style={{ marginTop: 64 }} className="flex">
                <SideMenu activeMenu={activeMenu} menus={PileMenu} setActiveMenu={setActiveMenu} />
                {props.children}
            </Content>
            {/* <Footer className="text-center">{new Date().getTime()}</Footer> */}
        </Layout>
    );
};
export default LayoutPage;
